<template>
    <div class="Sort">
		<div class="head-img">
			<img :src="photo">
		</div>
		<div class="content">
			<p class="p1">{{p1[0]}}</p>
			<ul class="body-list">
				<li v-for="item in sorts" :key="item.id">
					<img :src="item.img" >
					<p>{{item.name}}</p>
				</li>
			</ul>
			</div>
	</div>
</template>

<script>
export default {
    name: 'Underwear',

    data() {
        return {
			p1:['热门推荐'],
			photo:require('@/assets/images/分类页_03.gif'),
			sorts:[
                 {
                  id:1,
                  img: require('@/assets/images/分类页_07.gif'),
				  name:'手机',
                 } ,
                 {
                  id:2,
                  img: require('@/assets/images/分类页_09.gif'),
				  name:'充电宝',
                 },
                 {
                  id:3,
                  img: require('@/assets/images/分类页_11.gif'),
				  name:'耳机',
                 },
				 {
                  id:4,
                  img: require('@/assets/images/分类页_16.gif'),
				  name:'U盘',
                 } ,
                 {
                  id:5,
                  img: require('@/assets/images/分类页_17.gif'),
				  name:'荣耀',
                 },
                 {
                  id:6,
                  img: require('@/assets/images/分类页_18.gif'),
				  name:'路由器',
                 },
				 {
                  id:7,
                  img: require('@/assets/images/sort/男装/1.jpg'),
				  name:'夹克',
                 } ,
                 {
                  id:8,
                  img: require('@/assets/images/sort/男装/2.jpg'),
				  name:'T恤',
                 },
                 {
                  id:9,
                  img: require('@/assets/images/sort/男装/3.jpg'),
				  name:'针织衫',
                 },
				 {
                  id:10,
                  img: require('@/assets/images/sort/内衣/1.jpg'),
				  name:'内衣爆款',
                 } ,
                 {
                  id:11,
                  img: require('@/assets/images/sort/内衣/2.jpg'),
				  name:'围巾披肩',
                 },
                 {
                  id:12,
                  img: require('@/assets/images/sort/内衣/3.jpg'),
				  name:'配饰馆',
                 },
				 {
                  id:13,
                  img: require('@/assets/images/sort/家具/1.jpg'),
				  name:'餐桌',
                 } ,
                 {
                  id:14,
                  img: require('@/assets/images/sort/家具/2.jpg'),
				  name:'木床',
                 },
                 {
                  id:15,
                  img: require('@/assets/images/sort/家具/3.jpg'),
				  name:'沙发',
                 },
				 {
                  id:16,
                  img: require('@/assets/images/sort/手机/1.png'),
				  name:'小米',
                 } ,
                 {
                  id:17,
                  img: require('@/assets/images/sort/手机/2.jpg'),
				  name:'华为',
                 },
                 {
                  id:18,
                  img: require('@/assets/images/sort/手机/3.jpg'),
				  name:'苹果',
                 },
                ]
        };
    },
};
</script>

<style scoped>
@import url("@/assets/css/sorts.css");
</style>